<template>
  <div id="Menu">
    <div>
    	<div class="logo" @click="toIndex">
    		<img :src="logo" alt="" />
    	</div>
    	<div class="menu">
    		<li :class="{'active':isActive(route)}" v-for="route in $router.options.routes" v-if="route.level==1">
    			<router-link v-if="route.leaf" :to="{ path: route.path}">
						<span class="title">{{route.name}}</span>
					</router-link>
    			<span v-if="!route.leaf">{{route.name}}</span>
    			<div v-if="!route.leaf" class="secondMenu">    				
    				<span v-for="child in route.children" v-if="child.level==2">
    					<router-link :to="{ path: child.path}">
									<span class="child" :class="{'activeChild':($route.path.indexOf(child.path)!=-1)}">{{child.name}}</span>
							</router-link>
    				</span>
    			</div>
    		</li>
    	</div>
    </div>
  </div>
</template>

<script>
import logo from '@/images/logo.png'
export default {
  data () {
    return {
      logo,
      
    }
  },
  methods:{
  	
  	toIndex(){
  		this.active = 0;
  		this.$router.push({path:'/home'})
  	},
  	//菜单是否激活
		isActive(route){
			let currentPath = this.$route.path;
			if(route.leaf){
				if(currentPath==route.path){
					return true;
				}
			}
			for(let i in route.children){
				if(currentPath.indexOf(route.children[i].path)!=-1){
					return true;
				}
			}
			return false;
		}
  },
  created(){
  	
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import "../style/mixin.scss";
#Menu{
	background: $black;
	>div{
		height:60px;
		width:$mainWidth;
		margin:0 auto;
		@include fj();
		align-items:center;
		.logo{
			cursor: pointer;
		}
		.menu{
			display: flex;
			a{				
				color:white;				
			}
			>li{				
				color:white;
				font-size: 14px;
				width:130px;
				height:60px;
				text-align: center;
				line-height: 60px;
				cursor: pointer;
				position: relative;
				transition: 0.5s;
				.title{
					display: inline-block;
					width:100%;
					height:100%;
				}
				.child{
					margin:0 20px;
					color:black;
				}
				.activeChild{
					color:$blue;
				}
				&.active{
					background: $blue;
				}
				&:hover{
					.secondMenu{
						display: block;
					}
				}
				.secondMenu{
					display: none;
					height:40px;
					line-height: 40px;
					color:black;
					width:500px;
					position: absolute;
					transform: translateX(-185px);
					background: rgba(255,255,255,0.8);
					z-index: 10;
				}
			}
		}
	}
}
</style>
